<style scoped>

    .layout {
        background: #f5f7f9;
        position: relative;
        overflow: hidden;
        height: 100%;
    }

    .layout-breadcrumb {
        padding: 10px 15px 0;
    }

    .layout-content {
        min-height: 200px;
        margin: 15px;
        overflow: hidden;
        background: #fff;
        border-radius: 4px;
    }

    .layout-content-main {
        padding: 10px;
    }

    .layout-copy {
        text-align: center;
        padding: 10px 0 20px;
        color: #9ea7b4;
    }

    .layout-menu-left {
        background: #464c5b;
    }

    .layout-header {
        height: 60px;
        background: #fff;
        box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
    }

    .layout-logo-left {
        width: 90%;
        height: 30px;
        background: #5b6270;
        border-radius: 3px;
        margin: 15px auto;
    }

    .layout-ceiling-main a {
        color: #9ba7b5;
    }

    .layout-hide-text .layout-text {
        display: none;
    }

    .ivu-col {
        transition:;
    }

    #middlePart, #middlePart .ivu-row-flex, #middlePart .layout-menu-left {
        height: 100%;
        transition: no;
    }

    #middlePart .ivu-col-span-3 .ivu-menu-submenu-title {
        padding: 14px 10px;
    }

    #middlePart .layout-breadcrumb {
        height: 40px;
    }

    #middlePart .layout-content {
        margin: 0 !important;
    }

    #middlePart .layout-copy {
        height: 26px;
        padding: 0;
    }

    #middlePart .ivu-col-span-1 {
        width: 50px !important;
    }


</style>
<style>
    #middlePart .ivu-col-span-1 .ivu-menu-submenu-title {
        height: 30px;
        padding: 7px 19px 7px;
    }

    #middlePart .ivu-menu-submenu-title-icon {
        top: 3px;
        float: left;
    }

</style>
<template>
    <div id="middlePart">
        <div class="layout" :class="{'layout-hide-text': spanLeft < 3}">
            <Row type="flex">
                <Col :span="spanLeft" class="layout-menu-left">
                <Menu active-name="1" theme="dark" width="auto" :accordion="true" @on-select="routeTo">
                    <div style="overflow: hidden">
                        <Button type="text" @click="toggleClick" style="float: right">
                            <Icon style="color: white" type="navicon" size="32"></Icon>
                        </Button>
                    </div>
                    <MenuItem name="/home" style="border: 0">
                        <Tooltip placement="right" content="首页">
                            <i class="iconfont">&#xe63e;</i>
                            <span v-if="layout">&nbsp;&nbsp;&nbsp;首页</span>
                        </Tooltip>
                    </MenuItem>
                    <Submenu v-for="menu in router" :name="menu.path">
                        <template slot="title">
                            <span v-if="layout">{{menu.meta.title}}</span>
                        </template>
                        <MenuItem v-for="item in menu.children" :name="item.path">
                            <Tooltip placement="right" :content="item.meta.title">
                                <i class="iconfont" :class="item.meta.icon"></i>
                            </Tooltip>
                            <span v-if="layout">{{item.meta.title}}</span>
                        </MenuItem>
                    </Submenu>
                </Menu>
                </Col>
                <Col id="rightPart" :style="{width:widthval+'px'}">
                <div class="layout-content" style="width: 100%;border-radius: 0">
                    <router-view></router-view>
                </div>
                </Col>
            </Row>
        </div>
    </div>
</template>
<script>
    import util from '../libs/util';
    import vueRouter from '../routerArr';
    export default {
        data () {
            return {
                spanLeft: 3,
                spanRight: 21,
                router: vueRouter,
                layout: true,
                widthval: ''
            }
        },
        mounted(){
//            util.ajax.get('/expresses/').then(res => {
//            }).catch(err => {
//            });
        },
        computed: {
            iconSize () {
                return this.spanLeft === 3 ? 14 : 24;
            }
        },
        methods: {
            toggleClick () {
                //改变侧面导航样式
                if (this.spanLeft === 3) {
                    this.spanLeft = 1;
                    this.spanRight = 23;
                } else {
                    this.spanLeft = 3;
                    this.spanRight = 21;
                }
                this.layout = !this.layout
                this.getLeftWidth()
            },
            getLeftWidth(){
                let width = window.innerWidth;
                if (this.spanLeft === 1) {
                    this.widthval = window.innerWidth - 50;
                } else {
                    if (width > 1440) {
                        this.widthval = window.innerWidth - 160;
                    } else if (width > 1366 && width <= 1440) {
                        this.widthval = window.innerWidth - 145;
                    } else if (width > 1280 && width <= 1366) {
                        this.widthval = window.innerWidth - 145;
                    } else if (width > 1024 && width <= 1280) {
                        this.widthval = window.innerWidth - 145;
                    } else {
                        this.widthval = window.innerWidth - 110;
                    }
                }
            },
            routeTo(e){
                this.$router.push(e)
            }


        }
    }
</script>